<template>
	<view class="content">
		<!--banner 搜索s-->
		<view class="header">
		  <image src='../../static/home_bg.jpg'></image>
		  <view class="search" bindtap='nav2search'>
		    <view><input class="input-seach" type="text" placeholder="请输入关建字搜索聊天话术" placeholder-class="color_999" /></view>
		    <image src='../../static/search2.png'></image>
		  </view>
		</view>
		<!--banner 搜索e-->
		<!--推荐s-->
		<view class="top">
		  <view class="top-header">
		    <view class="top-header-bg"></view>
		    <view class="top-header-title">为你推荐</view>
		  </view>
		  <view class="top-menu">
		    <view class="top-menu-left">
		      <image src='../../static/recommend1.png' @tap='nav2duihua'></image>
		    </view>
		    <view class="top-menu-right">
		      <image src='../../static/recommend2.png' @tap='re2tab1'></image>
		      <image src='../../static/recommend3.png' style='margin-top:20upx;' @tap='nav2qinghua'></image>
		    </view>
		  </view>
		</view>
		<!--推荐e-->
		<view class="conversation-box">
			<view class="top-header header-box">
			  <view class="top-header-bg"></view>
			  <view class="top-header-title">聊天</view>
			</view>
			<view class="conversation-list">
				<view class="conversation">重新开场</view>
				<view class="conversation">土味情话</view>
				<view class="conversation">表情话术</view>
				<view class="conversation">趣味搭讪</view>
				<view class="conversation">场景搭讪</view>
			</view>
		</view>
		
		<view class="conversation-box">
			<view class="top-header header-box">
			  <view class="top-header-bg"></view>
			  <view class="top-header-title">升级</view>
			</view>
			<view class="conversation-list">
				<view class="conversation">话题互动</view>
				<view class="conversation">情感链接</view>
				<view class="conversation">互动游戏</view>
				<view class="conversation">幽默聊天</view>
				<view class="conversation">生活分享</view>
			</view>
		</view>
		
		<view class="conversation-box">
			<view class="top-header header-box">
			  <view class="top-header-bg"></view>
			  <view class="top-header-title">开场</view>
			</view>
			<view class="conversation-list">
				<view class="conversation">星座聊天</view>
				<view class="conversation">赞美聊天</view>
				<view class="conversation">聊天模板</view>
				<view class="conversation">好奇聊天</view>
				<view class="conversation">共鸣故事</view>
				<view class="conversation">风趣自然</view>
				<view class="conversation">讲故事</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
			
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	@import '~@/common/less/comLess.less';
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	
	.header {
	  @{wd}: 100%;
	}
	
	.header image {
	  @{wd}: 100%;
	  @{ht}: 453upx;
	}
	
	.header .search {
	  @{wd}: 690upx;
	  @{ht}: 80upx;
	  @{ma}-@{lf}: 30upx;
	  @{ma}-@{rg}: 30upx;
	  @{ma}-@{to}: -50upx;
	  @{bo}: solid 1upx #eee;
	  @{bo}-radius: 40upx;
	  @{bg}: #fff;
	  box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.02);
	  z-index: 10;
	  @{po}: relative;
	}
	
	.search view {
	  line-@{ht}: 80upx;
	  padding-@{lf}: 50upx;
	  color: #999;
	  @{fs}: 30upx;
	}
	
	.search image {
	  @{wd}: 36upx;
	  @{ht}: 36upx;
	  line-@{ht}: 80upx;
	  @{po}: absolute;
	  @{rg}: 40upx;
	  @{to}: 22upx;
	}
	.input-seach{
		line-@{ht}: 80upx;
	}
	/*推荐*/
	
	.top-header {
	  @{ma}-@{to}: 60upx;
	  @{ht}: 30upx;
	  @{fs}: 30upx;
	  @{ma}-@{lf}: 30upx;
	  display: flex;
	  flex-direction: row;
	}
	
	.top-header-bg {
	  @{bg}: #fd445c;
	  @{ht}: 100%;
	  @{wd}: 8upx;
	}
	
	.top-header-title {
	  @{ht}: 100%;
	  line-@{ht}: 100%;
	  @{ma}-@{lf}: 10upx;
	}
	
	.top-menu {
	  display: flex;
	  flex-direction: row;
	  @{ma}-@{lf}: 30upx;
	  @{ma}-@{rg}: 30upx;
	  @{wd}: 690upx;
	  @{ma}-@{to}: 40upx;
	}
	
	.top-menu-left {
	  @{wd}: 400upx;
	}
	
	.top-menu-left > image {
	  @{wd}: 380upx;
	  @{ht}: 390upx;
	}
	
	.top-menu-right {
	  @{wd}: 280upx;
	  @{ma}-@{lf}: 10upx;
	}
	
	.top-menu-right > image {
	  @{wd}: 280upx;
	  @{ht}: 180upx;
	}
	/*话题*/
	.conversation-box{
		@{wd}:95%;
	
	}
	.header-box{
		@{ma}-@{bt}:20upx;
	}
	.conversation-list{
		@{wd}:90%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 auto;
	}
	.conversation{
		@{bo}:1px solid red;
		@{ta}:center;
		@{pa}:8upx 25upx;
		@{bo}-radius:30upx;
		@{ma}-@{bt}:20upx;
	}
</style>
